<template>
	<scroll-view  scroll-x="true" :scroll-into-view='curId' scroll-with-animation>
		<view class="myTabBox">
			<view style="display: flex;align-items: center;justify-content: center;" v-for="dt in lists" class="item" :class="{'selected':curId==dt._id}" :id="dt._id" @click="setTab(dt)" :key="dt._id">{{dt.name}}</view>
		</view>
	</scroll-view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance} from 'vue'
	export default defineComponent({
		props:{
			lists:Array
		},
		setup(props,context) {
			const {proxy} = getCurrentInstance()
			const state = reactive({
				curId:''
			})
			
			onMounted(()=>{
				//state.curId = props.lists[0]?props.lists[0]._id:''
			})
			
			const setTab = item =>{
				if(state.curId!=item._id){
					proxy.$emit('change',item._id)
				}	
				state.curId = item._id
			}
			
			return {
				...toRefs(state),
				setTab
			}
		}
		
		
	})
</script>

<style lang="scss" scoped>
.myTabBox{
	display: flex;
	box-sizing: border-box;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 30rpx;
	.item{
		position: relative;
		z-index: 10;
		flex-shrink: 0;
		color: #333;
		&+.item{
			margin-left: 30rpx;
		}
		&.selected{
			color: #e3af2f;
			&::after{
				content: '';
				position: absolute;
				z-index: 10;
				width: 100%;
				bottom: 0;
				left: 0;
				height: 2px;
				background: #e3af2f;
			}
		}
	}
}
</style>